<template>
  <div>
    <van-nav-bar :title="receiver.nickname" left-arrow 
      @click-left="onClickLeft" class="vant_search"/>
    <div style="margin-top: 50px">
      <!-- 内容 -->
      <div class="content">
        <div class="left">
          <ul>
            <li v-for="item in recerMsgList">
              <p>{{ item.timestamp }}</p>
              <p>{{ item.content }}</p>
            </li>
          </ul>
        </div>
        <div class="right">
          <ul>
            <li v-for="item in messageList">
              <p>{{ item.time }}</p>
              <p>{{ item.msg }}</p>
            </li>
          </ul>
        </div>
      </div>
      <!-- 消息发送 -->
       <van-row>
        <van-col span="3">
          <van-button round @click="addBtn" size="small" icon="plus" />
        </van-col>
        <van-col span="15">
          <van-field v-model="message" rows="1" autosize type="textarea" />
        </van-col>
        <van-col span="6">
          <van-button round @click="addBtn" size="small"
            icon="plus" style="margin-right: 5px"/>
          <van-button v-if="this.message !== undefined"
            @click="send()" size="mini" type="success">
            发&nbsp;&nbsp;送</van-button>
          <van-button v-else icon="cross" round size="small"></van-button>
        </van-col>
      </van-row>
    </div> 
  </div>
</template>

<script>
import { sendMessage } from "@/api/request/sedMessage.js";
import VantNavbar from "@/components/VantNavbar.vue";

export default {
  components: { VantNavbar },
  data() {
    return {
      userInfo: this.$store.state.userInfo, //当前登录的用户信息
      message: undefined, //发送的内容
      receiver: this.$route.params, // 信息接收者
      recerId: this.$route.params.id, //接收者id
      messageList: [], //发送的信息
      recerMsgList: [], //接收到的信息
    };
  },
  created() {
    this.connect();
  },
  methods: {
    connect() {
      // 链接
      console.log("1.开始链接,创建socket");
      manualStop = false;
      window.localStorage.account = "";
      this.socket = new WebSocket(CIM_URI);
      this.socket.cookieEnabled = false;
      this.socket.binaryType = "arraybuffer";
      this.socket.onopen = this.innerOnConnectFinished;
      this.socket.onmessage = this.innerOnMessageReceived;
      this.socket.onclose = this.innerOnConnectionClosed;
    },
    innerOnConnectFinished() {
      // 链接成功回调
      console.log("进入链接成功回调方法");
      let account = window.localStorage.account;
      if (account === "" || account === undefined) {
        account = this.userInfo.userId;
        // account = this.username;
      }
      console.log('111111账号=', account);
      this.bind(account);
    },
    innerOnMessageReceived(e) {
      // 接收到消息回调
      console.log("socket触发接收消息时间,判断消息类型进行处理");
      let data = new Uint8Array(e.data);
      let type = data[0];
      let body = data.subarray(DATA_HEADER_LENGTH, data.length);

      // 判断消息类型
      if (type === PING) {
        console.log("消息类型--未知");
        this.pong();
        return;
      } else if (type === MESSAGE) {
        // 消息
        console.log("消息类型--普通消息");
        let message =
          proto.com.farsunset.cim.sdk.web.model.Message.deserializeBinary(body);
        this.onInterceptMessageReceived(message.toObject(false));
        return;
      } else if (type === REPLY_BODY) {
        // 账号绑定成功通知
        console.log("消息类型--绑定账号成功通知");
        let message =
          proto.com.farsunset.cim.sdk.web.model.ReplyBody.deserializeBinary(
            body
          );
        /**
         * 将proto对象转换成json对象，去除无用信息
         */
        let reply = {};
        reply.code = message.getCode();
        reply.key = message.getKey();
        reply.message = message.getMessage();
        reply.timestamp = message.getTimestamp();
        reply.data = {};
        /**
         * 注意，遍历map这里的参数 value在前key在后
         */
        message.getDataMap().forEach(function (v, k) {
          reply.data[k] = v;
        });
        if (reply.key === "client_bind" && reply.code === "200") {
          console.log("账号绑定成功");
        }
      }
    },
    innerOnConnectionClosed() {
      // 链接中断回调
      // 中断后循环进行重连
      if (!manualStop) {
        let time = Math.floor(Math.random() * (30 - 15 + 1) + 15);
        setTimeout(function () {
          this.connect();
        }, time);
      }
    },
    bind(account) {
      // 绑定账号
      console.log("进入绑定账号方法");
      window.localStorage.account = account;
      let deviceId = window.localStorage.deviceId;
      if (deviceId === "" || deviceId === undefined) {
        deviceId = generateUUID();
        window.localStorage.deviceId = deviceId;
      }
      console.log('---11----', deviceId);

      let browser = getBrowser();
      let body = new proto.com.farsunset.cim.sdk.web.model.SentBody();
      body.setKey("client_bind");
      body.setTimestamp(new Date().getTime());
      body.getDataMap().set("uid", account);
      body.getDataMap().set("channel", APP_CHANNEL);
      body.getDataMap().set("appVersion", APP_VERSION);
      body.getDataMap().set("osVersion", browser.version);

      body.getDataMap().set("packageName", APP_PACKAGE);
      body.getDataMap().set("deviceId", deviceId);
      body.getDataMap().set("deviceName", browser.name);
      body.getDataMap().set("language", navigator.language);
      this.sendRequest(body);
    },
    sendRequest(body) {
      // 通过websocket绑定用户
      console.log("发送绑定账号请求");
      let data = body.serializeBinary();
      let protobuf = new Uint8Array(data.length + 1);
      protobuf[0] = SENT_BODY;
      protobuf.set(data, 1);
      this.socket.send(protobuf);
    },
    pong() {
      let pong = new Uint8Array(PONG_BODY.byteLength + 1);
      pong[0] = PONG;
      pong.set(PONG_BODY, 1);
      this.socket.send(pong);
    },
    onInterceptMessageReceived(message) {
      // 判断消息类型,做不同的处理
      console.log("进入普通消息处理方法");
      /*
       * 被强制下线之后，不再继续连接服务端
       */
      if (message.action === ACTION_999) {
        manualStop = true;
      }
      //账户在其他地方登录了
      if (message.action === ACTION_999) {
        console.log("你的账号在其他地方登录了!");
        return;
      }
      // console.log("你接收到一条消息,消息内容:::", message.content);
      console.log("接收的消息", message);
      this.recerMsgList.push(message)
    },
    //发送消息
    send() {
      if (!this.message.trim().length) {
        return;
      }
      console.log(this.userInfo.userId);
      let par = {
        content: this.message,
        action: 2,
        sender: "system",
        receiver: this.recerId,
        format: "0",
      };
      sendMessage(par)
        .then((res) => {
          if (res.status === 200) {
            console.log(res.data.data);
            this.messageList.push({
              time: this.getTime(),
              msg: res.data.data.content,
            });
          }
        })
        .catch((err) => {
          alert(err);
        });
      this.message = undefined;
    },

    getTime(date) {
      if(!date) {   
        var date = new Date();
        console.log('发送时间', date);
      }
      else {
        var date = date;
         console.log('接收时间', date);
      }
      var Y = date.getFullYear() + '-';
      var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
      var D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' ';
      var H = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';
      var m = (date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes()) + ':';
      var s = (date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds());
      var datetime = Y+M+D+H+m+s;
      console.log(datetime);
      return datetime;
    },
    //---------------------------------------------------------------
    addBtn() {
      console.log("加号按钮");
    },
    onClickLeft() {
      this.$router.push({name: 'weChat'})
    }
  },
};
</script>

<style scoped>
.vant_search{
   /* background-color: green; */
  width: 100%;
  position: fixed;
  height: 46px;
  top: 0;
  z-index: 99;
  
}
.content {
  /* max-width: 630px; */
  height: 562px;
  border: 1px solid green;
  margin: 10px 15px;

}
.left{
  text-align: left;
  overflow: scroll;
  /* width: 40%; */
}
/* li{
  width: 40%;
} */
.right {
  /* text-align: right;
  overflow: scroll;
  width: 40%; */
  overflow: scroll;
  overflow-x: hidden;
  overflow-y: visible;
  height: 350px;
}
.message {
  background-color: rgb(245, 242, 242);
}
.van-row {
  background-color: #f5f2f2;
  padding: 3px 5px;
  border: 1px solid gainsboro;
  min-height: 35px;
}
.van-cell {
  padding: 3px;
}
.info {
  display: flex;
  justify-content: space-between;
}
</style>